import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({Key? key}) : super(key: key);

  @override
  State<TabsPage> createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage>
    with SingleTickerProviderStateMixin {
  final Key tabsKey = UniqueKey();

  final Key tabBarViewKey = UniqueKey();
  TabController? tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, initialIndex: 0, vsync: this);
    tabController?.addListener(() {
      print("TabsPage ${tabController?.index}");
    });
  }

  //销毁时调用
  @override
  void dispose() {
    super.dispose();
    tabController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: YJColors.BACKGROUND_COLOR,
      appBar: AppBar(
        title:
            TextView.text("底部TAB", fontSize: YJSize.SP_16, isLineHeight: false),
        leading: InkWell(
          child: const Icon(
            Icons.arrow_back_ios,
            size: 16,
            color: Colors.black87,
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        child: buildCenter(context),
      ),
    );
  }

  buildCenter(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        const SizedBox(height: 10),
        buildText("Text TabBar 纯文本标签栏"),
        Container(
          width: YJSize.screenWidth,
          height: YJSize.dp(56),
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: tabBar1(),
        ),
        const SizedBox(height: 10),
        buildText("Text TabBar 纯图标标签栏"),
        Container(
          width: YJSize.screenWidth,
          height: YJSize.dp(56),
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: tabBar2(),
        ),
        const SizedBox(height: 10),
        buildText("Text TabBar TabBar图标加文本标签栏"),
        Container(
          width: YJSize.screenWidth,
          height: YJSize.dp(56),
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: tabBar3(),
        ),
      ],
    );
  }

  Widget buildText(String title) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 36),
        child: TextView.text(title),
      );

  Widget tabBar1() {
    List<BarItem> tabList = [];
    tabList.add(BarItem(
      type: YJBarItemType.TEXT,
      label: "Item",
      backgroundColor: const Color(0xFFFFF0E5),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT,
      label: "Item",
      backgroundColor: const Color(0xFFFFF0E5),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT,
      label: "Item",
      backgroundColor: const Color(0xFFFFF0E5),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT,
      label: "Item",
      backgroundColor: const Color(0xFFFFF0E5),
    ));
    final YJTabBar tabBar = YJTabBar(
      onFunction: (index) {},
      tabBarHeight: YJSize.dp(40),
      tabs: tabList,
      labelSize: YJSize.SP_14,
      unselectedLabelSize: YJSize.SP_14,
      labelColor: YJColors.THEME_COLOR,
      unselectedLabelColor: YJColors.BLACK85,
    );
    return tabBar;
  }

  Widget tabBar2() {
    List<BarItem> tabList = [];
    tabList.add(BarItem(
      type: YJBarItemType.ICON,
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.ICON,
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.ICON,
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    final YJTabBar tabBar = YJTabBar(
        onFunction: (index) {}, tabBarHeight: YJSize.dp(40), tabs: tabList);
    return tabBar;
  }

  Widget tabBar3() {
    List<BarItem> tabList = [];
    tabList.add(BarItem(
      type: YJBarItemType.TEXT_OR_ICON,
      label: "Item",
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT_OR_ICON,
      label: "Item",
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT_OR_ICON,
      label: "Item",
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    tabList.add(BarItem(
      type: YJBarItemType.TEXT_OR_ICON,
      label: "Item",
      icon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.THEME_COLOR,
      ),
      unIcon: Icon(
        Icons.menu,
        size: YJSize.dp(22),
        color: YJColors.BLACK45,
      ),
    ));
    final YJTabBar tabBar = YJTabBar(
      onFunction: (index) {},
      tabBarHeight: YJSize.dp(40),
      tabs: tabList,
      labelSize: YJSize.SP_10,
      unselectedLabelSize: YJSize.SP_10,
      labelColor: YJColors.THEME_COLOR,
      unselectedLabelColor: YJColors.BLACK85,
    );
    return tabBar;
  }
}
